import { compileToFunction } from "./compiler/index";
import { mountComponent } from "./lifecycle";
import { initState } from "./state";
import { getOuterHTML } from "./utils/index";

export default function initMixin(Vue) {
  Vue.prototype._init = function (options) {
    const vm = this;
    vm.$options = options;

    // 数据初始化
    initState(vm);

    // 页面挂载
    if (vm.$options.el) {
      vm.$mount(vm.$options.el);
    }
  }

  Vue.prototype.$mount = function (el) {
    const vm = this;
    const options = vm.$options;

    el = document.querySelector(el);
    // 默认查找模板顺序，从 render -> template -> el标签中的的内容
    if (!options.render) {
      // 对模板编译
      let template = options.template;
      if (!template && el) {
        template = getOuterHTML(el);
      }
      // 将 template 转换成 AST 语法树， 再将 AST 语法树转换成 render 函数
      // render 函数是具有 _c(), _v(), _s() 组成的标签信息处理函数就是生成虚拟DOM。这个虚拟DOM返回出去就生成了 render函数
      const render = compileToFunction(template);
      options.render = render;   // 为 vm.$options 挂载一个 render 函数
    }
    // 挂载并渲染组件
    mountComponent(vm, el);
  }

}